<template>
  <div>
    <el-form
      :model="numberValidateForm"
      ref="numberValidateForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="作者" prop="author">
        <el-input
          type="age"
          v-model.number="numberValidateForm.author"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input
          type="age"
          v-model.number="numberValidateForm.title"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="数据描述" prop="desc">
        <el-input
          type="age"
          v-model.number="numberValidateForm.desc"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="封面" prop="thumb">
    
        <el-upload

          action="http://rap2api.taobao.org/app/mock/286620/api/upload"
          list-type="picture-card"
          :auto-upload="true"
          :on-success="upload"
          :limit="1"
          
        >
       
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item label="富文本">
        <div id="content"></div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('numberValidateForm')"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {  addOne} from "@api";
import E from "wangeditor";
export default {
  
  data() {
    return {
      numberValidateForm: {
        author: "",
        title: "",
        desc: "",
        thumb: "",
        content: "",
      },

      disabled: false
     
    };
  },
  methods: {
    submitForm(formName) {
        if(!this.numberValidateForm.title){
            this.$message({
                type:"error",
                message:"标题不能为空"
            })
            return
        }
     this.numberValidateForm.content=this.numberValidateForm.editor.txt.html()
     this.numberValidateForm.editor=null
     console.log(this.numberValidateForm);
     
     addOne(this.numberValidateForm).then(res=>{
       if(res.data.code===200){
          this.$message({
           type:"success",
           message:"添加成功"
         })
       }
     })
    },
    handleRemove(file) {
      console.log(file, 44);
      this.numberValidateForm.thumb = "";
      console.log(this.numberValidateForm);
      // 删除
    },

    upload(val) {
      this.numberValidateForm.thumb = val.data.filePath;
      console.log(val.data);
      console.log(this.numberValidateForm);
      this.isShow=false
    },
  },

  mounted() {
       const editor = new E("#content");
     this.numberValidateForm.editor = editor;
        editor.create();
  },
};
</script>

<style lang="scss" scoped>
.content {
  z-index: 1;
}
.thumb{
  width: 150px;
  height: 150px;
  overflow: hidden;
  float: left;
  border: 1px dotted #ccc;
}
.thumb img{
  width: 150px;
  height: 150px;
}
.el-upload{
  float: left;
}
</style>